{% extends '::base.html.twig' %}
{% block title %}Edición de Unidades{% endblock %}

{% block greensectiontitle %}Unidad{% endblock %}
{% block greensectionbody %}
    
<form id="editForm" action="{{ entity.id ? path('unidad_update', { 'id': entity.id, 'numeroModulo':numeroModulo, 'idmalla':id_malla}) : path('unidad_create', { 'numeroModulo': numeroModulo, 'idmalla': id_malla }) }}" method="post" {{ form_enctype(edit_form) }}>
    {{ form_errors(edit_form.nombre) }}
    {{ form_errors(edit_form.numeroHoras) }}
    {{ form_errors(edit_form.numeroCreditos) }}
    {{ form_errors(edit_form) }}
  
    <h5 style="color: red">* Campos Obligatorios</h5>
    {{ form_label(edit_form.modulo, 'Nivel') }}
    {{ form_widget(edit_form.modulo) }} 
    
    <div style="color: red">
    {{ form_label(edit_form.nombre,'Nombre') }}{{ form_widget(edit_form.nombre) }}*<cn style = "color: black" > (solo letras)</cn></br>
    {{ form_label(edit_form.numeroHoras,'Numero de Horas') }}{{ form_widget(edit_form.numeroHoras) }}*<cn style = "color: black" > (maximo 3 caracteres, solo números)</cn></br></br>
    {{ form_label(edit_form.numeroCreditos,'Numero de Creditos') }}{{ form_widget(edit_form.numeroCreditos) }}*<cn style = "color: black" > (maximo 2 caracteres, solo números)</cn></br></br>
    </div>
 
    {{ form_row(edit_form.esObligatoria) }} </br>
   
    
    {% macro prototype(tema) %}
    <tr>
        
        <td style="color: red">{{ form_widget(tema.nombre) }}*</td>
        <td><div id="controls" style="text-align: center;"><a title="Quitar el contenido de la unidad o materia" href="#">Quitar</a></div></td>
    </tr>
    {% endmacro %}  
 
 
    <div id="records_table" class="greenTableMargin">
        
    <table id="temas-table" padding="0" margin="0">
        <thead>
            <tr>
                <th colspan="3">
                    <div id="controls">
                        Contenidos
                        <a title="Agregar un nuevo contenido a la unidad o materia"href="#" id="add-tema" style="float:right;">Agregar</a>
                    </div>
                </th>
            </tr>
            <tr>
                <th>Nombre</th>
                <th>Acciones</th>
            </tr>
        </thead>
          <tbody id="temas-table-body" style="color: red"
                    nombre-data-prototype="{{ form_widget(edit_form.temas.get('prototype').nombre) | e }}*">
            {# iterate over each existing carrera and render its field: codigo, nombre, universidad #}
            {% for tema in edit_form.temas %}
                {{_self.prototype(tema)}}
            {% endfor %}
              
        </tbody>
         
     </table>
     </div>     
        
      <div id="controls"> 
          <a title="Guardar la informacion y contenidos de la unidad o materia" id="saveButton" href="#">Guardar</a>
          <a title="Cancelar y volver a la lista de unidades" id="cancelarButton"  idmalla="{{id_malla}}" numeroModulo="{{ numeroModulo}}" href="#">Cancelar</a>
          <a title="Agregar un nuevo contenido a la unidad o materia"href="#" id="add-tema1" style="position:absolute; left: 89%;" >Agregar</a>
          
                    
      </div>

   {#{ form_rest(edit_form) }#}
    </form>
{% endblock %}

{% block javascripts %}
<script type="text/javascript">
    // realiza un seguimiento de cuántos campos de correo electrónico se han pintado
    var temasCount = '{{ edit_form.temas | length }}';
    
    jQuery('#add-tema').click(function() {
        var temasTableBody = jQuery('#temas-table-body');

       
        var nombrePrototype = temasTableBody.attr('nombre-data-prototype');

        // sustituye el "__name__" usado en el id y name del prototipo 
       
        nombreWidget = nombrePrototype.replace(/\$\$name\$\$/g, temasCount);

        temasCount++;

        // crea un nuevo elemento lista y lo añade a nuestra lista
       
        var nombreTableCell = jQuery('<td></td>').html(nombreWidget);

        var newRow = jQuery($('<tr>'));
        var endRow = jQuery($('</tr>'));
        var removeCell = $('<td><div id="controls" style="text-align: center;"><a title="Quitar el contenido de la unidad o materia" href="#" >Quitar</a></div></td>');

        newRow.appendTo(temasTableBody);
      
        nombreTableCell.appendTo(newRow);
        removeCell.appendTo(newRow);
        endRow.appendTo(temasTableBody);
        jQuery('.alfa2').alpha({allow:",.: "});

        return false;
    });
    
    jQuery('#add-tema1').click(function() {
        var temasTableBody = jQuery('#temas-table-body');

       
        var nombrePrototype = temasTableBody.attr('nombre-data-prototype');

        // sustituye el "__name__" usado en el id y name del prototipo 
       
        nombreWidget = nombrePrototype.replace(/\$\$name\$\$/g, temasCount);

        temasCount++;

        // crea un nuevo elemento lista y lo añade a nuestra lista
       
        var nombreTableCell = jQuery('<td></td>').html(nombreWidget);

        var newRow = jQuery($('<tr>'));
        var endRow = jQuery($('</tr>'));
        var removeCell = $('<td><div id="controls" style="text-align: center;"><a title="Quitar el contenido de la unidad o materia" href="#" >Quitar</a></div></td>');

        newRow.appendTo(temasTableBody);
      
        nombreTableCell.appendTo(newRow);
        removeCell.appendTo(newRow);
        endRow.appendTo(temasTableBody);
        jQuery('.alfa2').alpha({allow:",.: "});

        return false;
    });
    
    
    jQuery('#temas-table-body').on('click', 'a', function(event) {
        event.preventDefault();
    
        if ($(this).text() === "Quitar") {
            $(this).closest('tr').remove();
           
        }
    });
    
     jQuery('#cancelarButton').click(function() {
         if ($(this).text() === "Cancelar") {
              var numeroModulo = $(this).attr('numeroModulo');
              var idmalla = $(this).attr('idmalla');
              //alert(numeroModulo);

           window.location.href='/app_dev.php/unidad/'+idmalla +"/"+ numeroModulo + "/index";
         }
     });
         
  
    
    
     
    
    
</script>
{% endblock %}




